<layout name="page" />
<block name="content">
	{:widget('page_header/simple',array('name'=>'考勤规则设置'))}
	<div class="frame">
		<form method='post' id="form_data" name="form_data" enctype="multipart/form-data"  >
			<input type="hidden" id="ajax" name="ajax" value="0">
			<input type="hidden" id="opmode" name="opmode" value="add">
			<input type="hidden" name="actor" id="actor">
			<input id="longitude" name="longitude" type="hidden" style="width:100px; margin-right:10px;" value="120.388942"/>
			<input id="latitude" name="latitude" type="hidden" style="width:100px; margin-right:10px;" value="36.073379" />
			<div class="frame">
				<div class="box col-12">
					
						<label class="input-label" for="name">规则名称*：</label>
						
							<input class="input" type="text" id="name" name="name" check="required" info="请输入名称">
						</div>
					</div>
				</div>
				<div class="box col-12">
					
						<label class="input-label" for="sign_type">考勤类型*：</label>
						<div class="input-block x-select">
							<select class="input"　id="sign_type" name="sign_type" check="required" info="请输入考勤类型">
								<option value="">选择考勤类型</option>
								<option value="sign_in">签到</option>
								<option value="sign_out">签退</option>
							</select>
						</div>
					</div>
				</div>
			</div>
			<div class="frame">
				<div class="box col-12">
					
						<label class="input-label" for="name">考勤开始时间*：</label>
						
							<input type="time"  class="input" id = 'start_time' name="start_time" check="required" info="请输入时间">
						</div>
					</div>
				</div>
				<div class="box col-12">
					
						<label class="input-label" for="name">考勤结束始时间*：</label>
						
							<input type="time" class="input" id = 'end_time' name="end_time" check="required" info="请输入时间">
						</div>
					</div>
				</div>
			</div>
			<div class="frame">
				<div class="box col-12">
					
						<label class="input-label" for="location">考勤地点*：</label>
						
							<input class="input" check="required" info="请输入考勤地点" type="text" id="cityName" onkeyup="theLocation()" name="address">
						</div>
					</div>
				</div>
				<div class="box col-12">
					<div class="layui-form-item ">
						<label class="input-label" for="name">周边范围(m)*：</label>
						
							<input class="input" type="text" id="radius" name="radius" check="required" info="请输入误差范围">
						</div>
					</div>
				</div>
			</div>
			<div class="frame">
				<div class="box col-12">
					
						<label class="input-label" for="name">优先级*：</label>
						
							<input class="input" type="text" id="sort" name="sort" check="required" info="请输入优先级">
						</div>
					</div>
				</div>
			</div>
			<div  class="layui-form-item" id="map" >
				<div id="allmap" style="margin-left:10%; width:85%;height:500px"></div>
			</div>
			
				<div class="action input-block">
					<a class="btn btn-normal" onclick="save()">保存</a>
					<a class="btn btn-return"onclick="go_return_url();">取消</a>
				</div>
			</div>
		</form>
	</div>
</block>
<block name="js">
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=2LoqyAU1SXDkMeI5f4ToV0VO"></script>
	<script type="text/javascript">
		layui.use('global', function() {
			var $ = layui.jquery;

			var map = new BMap.Map("allmap");
			var point = new BMap.Point(116.331398, 39.897445);
			map.centerAndZoom(point, 12);
			var myCity = new BMap.LocalCity();
			myCity.get(myFun);
			theLocation();
			$('#btn_save').on('click', function() {
				var val = document.getElementById("radius").value;
				var start_time = document.getElementById("start_time").value;
				var end_time = document.getElementById("end_time").value;
				var str = parseInt(start_time.replace(/:/, ''));
				var str1 = parseInt(end_time.replace(/:/, ''));
				if (isNaN(val)) {
					layer.msg("请输入数字");
					return false;
				};
				if (str > str1) {
					layer.msg("结束时间必须大于开始时间");
					return false;
				}
				send_form("form_data", "{:url('save')}", '', function() {
				});
			});

			function delPoint() {
				var allOverlay = map.getOverlays();
				for (var i = 0; i < allOverlay.length; i++) {
					map.removeOverlay(allOverlay[i]);
				}
			};

			function myFun(result) {
				var cityName = result.name;
				map.setCenter(cityName);
			}

			function theLocation() {
				map.enableScrollWheelZoom();
				//启用滚轮放大缩小，默认禁用
				map.enableContinuousZoom();
				//启用地图惯性拖拽，默认禁用
				//单击获取点击的经纬度
				map.addEventListener("click", function(e) {
					delPoint();
					document.getElementById("longitude").value = e.point.lng;
					//经度
					document.getElementById("latitude").value = e.point.lat;
					//纬度
					var new_point = new BMap.Point(e.point.lng, e.point.lat);
					var marker = new BMap.Marker(new_point);
					// 创建标注
					map.addOverlay(marker);
					marker.enableDragging();
					marker.addEventListener("dragend", function(e) {
						//alert("当前位置：" + e.point.lng + ", " + e.point.lat);
						document.getElementById("longitude").value = e.point.lng;
						//经度
						document.getElementById("latitude").value = e.point.lat;
					});
				});
				var city = document.getElementById("cityName").value;
				if (city != "") {
					map.centerAndZoom(city, 18);
					// 用城市名设置地图中心点
				}
			};


			window.theLocation = theLocation;
		});

	</script>
</block>